<template>
  <div>
    <div>
      <h1 style="color: #0a0a80">{{ title }}</h1>
    </div>
    <span>
      <div id="c1"></div>
      <div id="mountNode"></div>
    </span>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
export default {
  name: "studentPoint",
  data() {
    return {
      user: JSON.parse(window.sessionStorage.getItem("user")),
      title: "体重身高散点图",
      formInline: {
        name: "",
      },
    };
  },

  methods: {
    test: function() {
      const chart = new Chart({
        container: "c1", // 指定图表容器 ID
        autoFit: true, // 指定图表宽度
        height: 540, // 指定图表高度
      });
      // Step 2: 载入数据源
      this.getRequest("/clazz/" + this.user.clazz, {}).then((resp) => {
        chart.data(resp);
        chart.scale({
          height: { nice: true },
          weight: { nice: true },
        });

        chart.axis("height", {
          label: {
            formatter: (val) => {
              return +val + "cm";
            },
          },
        });

        chart.axis("weight", {
          label: {
            formatter: (val) => {
              return +val + "kg";
            },
          },
        });

        chart
          .point()
          .position("height*weight")
          .shape("circle")
          .color("sex")
          .tooltip(
            "name*mileageTerm1*height*weight",
            (name, mileageTerm1, height, weight) => {
              return {
                name: name + ":  总里数 " + mileageTerm1 + "(km)",
                value: height + "(cm), " + weight + "(kg)",
              };
            }
          )
          .style({
            fillOpacity: 0.85,
          });
        chart.tooltip({
          showTitle: false,
          showCrosshairs: true,
          crosshairs: {
            type: "xy",
          },
          itemTpl:
            '<li class="g2-tooltip-list-item" data-index={index} style="margin-bottom:4px;">' +
            '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' +
            "{name}<br/>" +
            "{value}" +
            "</li>",
        });
        chart.interaction("legend-highlight");
        chart.render();
      });
    },
  },

  mounted() {
    this.test();
  },
};
</script>

<style scoped></style>
